import UploadImg from "../../../components/uploadImg";
import {Button, Card, Form, Input, Select} from "antd";
import React, {useEffect, useState} from "react";
import {RcFile} from "antd/es/upload";
import {uploadFile} from "../../../api/modules/file";
import {getUserinfo, modifyUserinfo} from "../../../api/modules/user";
import {connect} from "react-redux";
import {setUserinfo} from "../../../store/modules/user/action";
import {getAllRole} from "../../../api/modules/role";

interface FieldType {
}

function Userinfo(props:any){
    const {userinfo,setUserinfo} = props
    const [roleList,setRoleList] = useState([])
   const [form] = Form.useForm();
   const [avatar,setAvatar] = useState(userinfo.avatar)
   const onFinish = async  (values:any)=>{
       const id  = form.getFieldValue("id")
       const params = {...values,id}
       const {data} =  await  modifyUserinfo(params)
       data && getUser();
   }
   const getUser = async()=>{
       const { data } = await getUserinfo(userinfo.id) as any
       data?.avatar && setAvatar(data.avatar)
       form.setFieldsValue(data)
       if( data ){
           const newUserinfo = {...userinfo,...data}
           setUserinfo(newUserinfo);
       }
   }
   const getRole = async ()=>{
       const {data} = await getAllRole();
       setRoleList(data as any);
   }
   useEffect(()=>{
       getUser()
       getRole()
   },[])
    const customRequest = async (options:any)=>{
        const {file} = options;
        const formData = new FormData();
        formData.append("file", file as RcFile);
        const {data} = await uploadFile(formData);
        form.setFieldValue('avatar',data)
        setAvatar(data);
    }
    const RoleOption = roleList.map((item:any)=>{
        return {
            value:item.flag,
            label:item.name
        }
    })
    return (
            <Card title="Card title" bordered={false} style={{ width: '100%' }}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 ,margin:'0 auto'}}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                    onFinish={onFinish}

                >
                    <Form.Item name="avatar" wrapperCol={{span:24}} style={{textAlign:'center'}}>
                            <UploadImg customRequest={customRequest} avatar={avatar}></UploadImg>
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: "Please input your username!" }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<FieldType> label="昵称" name="nickname">
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType> label="角色" name="role">
                        <Select options={RoleOption}>
                        </Select>
                    </Form.Item>
                    <Form.Item<FieldType> label="邮箱" name="email">
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType> label="密码" name="password">
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<FieldType> label="地址" name="address">
                        <Input />
                    </Form.Item>
                    <Form.Item<FieldType> label="手机号码" name="phone">
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{span:24}} style={{textAlign:'center'}}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                    </Form.Item>
                </Form>
            </Card>
    )
}
const mapStateToProps  = (state:any) => state.user
const mapDispatchToProps = {setUserinfo}
export default connect(mapStateToProps,mapDispatchToProps)(Userinfo);